<template>
  <div class="home">
    <button @click="show = !show">Toggle render</button>
    <transition name="a">
      <p v-if="show">hello</p>
    </transition>
  </div>
</template>

<script>
// @ is an alias to /src
import { ref } from 'vue';
export default {
  name: "HomeView",
  components: {},
  setup(props) {
    const show = ref(true);
    return {
      show
    }
  }
};
</script>
<style lang="scss" scoped>
// .a-enter-active {
//   transition: all 0.3s ease-out;
// }

// .a-leave-active {
//   transition: all 0.8s cubic-bezier(1, 0.5, 0.8, 1);
// }
// .a-enter-to,.a-leave-from{
//   transform: translateX(-20px);
// }
// .a-enter-from,
// .a-leave-to {
//   transform: translateX(20px);
//   opacity: 0;
// }
.a-enter-active,.a-leave-active {
  transition: all 0.3s ease-out;
}
 .a-enter-from,.a-leave-to{
   opacity: 0;
 }
</style>

